<template>
  <div id="app">
    <el-container>
      <menu-com />
      <el-container direction="vertical">
        <header-com />
        <el-main>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{$route.meta.title}}</el-breadcrumb-item>
          </el-breadcrumb>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import HeaderCom from '@/components/HeaderCom.vue'
import MenuCom from '@/components/MenuCom.vue'

export default {
  components: {
    HeaderCom,
    MenuCom
  }
}
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
ul,
li {
  list-style: none;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #333;

  .el-main {
    background-color: #f6f7f8;
    position: relative;

    .el-breadcrumb {
      margin: 5px 0 20px 0;
    }
    .import_global {
      position: absolute;
      top: 13px;
      right: 20px;
    }
  }
  .el-container {
    height: 100vh;
  }
  .query-form {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 0;

    &.el-form--inline {
      .el-form-item {
        margin-bottom: 15px;
      }
    }

    .el-select {
      width: 100%;
    }

    .el-form-item__content,
    .el-date-editor {
      width: 260px;
    }
    .width-auto {
      .el-form-item__content,
      .el-date-editor {
        width: auto;
      }
    }

    .btn {
      clear: both;
      padding-top: 10px;

      .el-button {
        margin: 0 1%;
      }
    }
  }

  .table {
    background: #fff;
    padding: 20px;
    margin-top: 20px;
    border-radius: 8px;

    .table {
      padding: 0;
      margin-top: 0;
    }

    .el-table th.el-table__cell {
      background-color: #f6f7f8;
    }

    :deep .el-table__header {
      th {
        background: #f6f7f8;
      }
    }
  }
  .el-pagination {
    text-align: right;
    margin-top: 15px;
  }
}

@media screen and (max-width: 1300px) {
  #app {
    .query-form.el-form--inline {
      .el-form-item__content {
        width: 70%;
      }
    }
  }
}
</style>
